<template>
  <view class="segment-container">
    <view
      v-for="(item, index) in list"
      :key="index"
      :class="['segment-item', { active: current == index }]"
    >
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    current: {
      type: [Number, String],
      default: 0, // 默认选中的索引
    },
  },
  data() {
    return {
    };
  },
  methods: {
    handleClick(index) {
      return
      this.$emit('change', index);
    },
  },
};
</script>

<style lang="scss" scoped>
.segment-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px; 
  border: 1px solid #ffffff;
  width: fit-content
}

.segment-item {
  flex: 1;
  text-align: center;
  padding: 16rpx 32rpx;
  font-size: 24rpx;
  color: #222222;
}

.segment-item.active {
  background-color: #ffffff; 
  color: #333; 
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0,0,0,0.05);
  border-radius: 40rpx; 
}
</style>
